<template>
  <view class="body">
    <!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
    <!--    <view class="nav row_align_center" id="nav">-->
    <!--      <li style="color: #fff;z-index: 999;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>-->
    <!--    </view>-->
    <view class="top_head">
      <view class="flex solid-bottom padding justify-between">
        <view class="radius">
          <view class="text_des">
            <text class="month_num">{{ nowTime.month }}</text>
            <text class="month_text">月</text>
            <text class="month_year">{{ nowTime.year }}</text>
            <text class="point">.</text>
            <text class="title">统计报告</text>
          </view>
        </view>
        <view class="radius text-white">
          <picker mode="date" fields="month" :value="date" @change="bindDateChange">
            <view class="uni-input">{{date}}
<!--              <text class="lg text-gray" class="cuIcon-triangledownfill"></text>-->
            </view>
          </picker>
        </view>
      </view>

      <view class="top_desc">
        <view class="text-gray">订单总金额</view>
        <view class="remaining">{{ reportRes.stasticsOrderWallet.order_price ||0 }}</view>
        <view class="row head_block">
          <view class="flex">
            <view class="flex-sub  radius">
              <text class="text-gray">完成数量</text>
              <text class="text_green">{{ reportRes.stasticsOrderWallet.finish_count||0 }}</text>
            </view>
            <view class="flex-sub radius">
              <text class="text-gray">完成金额</text>
              <text class="income">{{ reportRes.stasticsOrderWallet.finish_price ||0}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between;">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">订单分类</text>
          </view>
        </view>
        <view class="charts-box" style="height: 200px;">
          <order-type-graph :orderStatusList="reportRes.orderStatusList"></order-type-graph>
        </view>
      </view>
      <view class="row_block">
        <view class="the_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">{{ nowTime.month }}月订单明细</text>
        </view>
        <view class="charts-box">
          <order-daily-list-graph :orderDailyList="reportRes.orderDailyList"></order-daily-list-graph>
        </view>
        <view class="the_title">
          <text class="margin_stand-samll font-middle wide">支出单笔最贵</text>
        </view>
        <view class="extend_rank">
          <view class="rank_item" v-for="(item,index) in extendRank" :key="index">
            <image :src="getImage(index)" mode="widthFix"></image>
            <text class="name">{{ item.name }}</text>
            <text class="desc">{{ item.desc }}</text>
            <text class="text_green money">{{ item.money }}</text>
          </view>
        </view>
      </view>
      <view class="row_block">
        <view class="the_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">{{ nowTime.month }}月明细</text>
        </view>
        <view class="detail_list">
          <view v-for="(item,index) in detail_list" :key="index" class="detail_item">
            <view>
              <view class="font-middle">{{ item.date }}</view>
              <view class="font-small">{{ item.time }}</view>
            </view>
            <view class="icon">
              <li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li>
            </view>
            <view class="right_content">
              <view class="money">{{ item.type == 'income' ? '+' : '-' }}{{ item.money }}</view>
              <view class="text-gray font-middle">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="end_block">
        <view class="the_title" style="margin-bottom: 40rpx;">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">我的支出水平</text>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
                :class="item.state ? 'text_green font-middle':''">{{ item.name }}
          </view>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
                :class="item.state ? 'active_bar':'default_bar'"></view>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
                :class="item.state ? 'text_green font-middle':''">{{ item.range }}
          </view>
        </view>
        <view class="extend_message">
          <li style="color: #ccc;" :class="['iconfont icon-message']"></li>
          <view>
            “ 我的支出水平已超过
            <text>{{ extend_morethan }}</text>
            的乡镇居民。 ”
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, computed, reactive, ref} from 'vue'
import {useStore} from "@/common/store";
import {statisticsReport} from "../../../common/api/report";
import OrderTypeGraph from "./OrderTypeGraph.vue";
import OrderDailyListGraph from "./OrderDailyListGraph.vue";
const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)
const userType = computed(() => store.userType)

const nowTime = ref({});
// 请求参数
const params = ref({})
const date = ref('2024-8');

const getDate = (type: any) => {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  return `${year}-${month}`;
}

// 返回结果
const reportRes = ref({
  "stasticsOrderWallet":
      {"waitpay_price":0.00,
        "available_price":0.00,
        "available_count":0,
        "order_count":0,
        "waitpay_count":0,
        "order_price":0.00,
        "init_price":0.00,
        "finish_count":0,
        "paysuccess_count":0,
        "cancel_count":0,
        "cancel_price":0.00,
        "init_count":0,
        "paysuccess_price":0.00,
        "finish_price":0.00},
   "orderDailyList" :{
     categories:[],
     dataCount:[],
     dataPrice:[]
   }
})

const initStatisticsReport = () => {
  statisticsReport(params.value).then(res => {
    console.log(res)
    reportRes.value = res.data;
  })
}

onMounted(() => {
  params.value.adminId = userId.value;
  params.value.adminType = userType.value;
  params.value.reportMonth = '2024-08';
  initStatisticsReport()

  date.value = getDate({format: true})

  const _now = new Date();
  nowTime.value.year = _now.getFullYear(),
      nowTime.value.month = _now.getMonth() + 1,
      nowTime.value.day = _now.getDay()
})

</script>

<style scoped lang="scss">
.body {
  height: 100%;
  background-color: #560594;
  margin: 0;
  padding-bottom: 20rpx;

  li {
    list-style-type: none;
  }

  .nav {
    position: fixed;
    top: 50rpx;
    left: 20rpx;
  }

  .text_green {
    color: #4ECDB6;
  }

  .main {
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .detail_list {
      height: 700rpx;
      overflow: auto;
      color: #9E9E9E;

      .detail_item {
        display: flex;
        margin: 20rpx 0;
        align-items: center;

        .icon {
          width: 30%;
          text-align: center;

          li {
            font-size: 80rpx;
          }
        }

        .right_content {
          width: 50%;
          text-align: center;
        }

        .icon-income {
          color: #4AABF9;
        }

        .icon-expend {
          color: #E45521;
        }

        .money {
          color: #000;
        }
      }
    }

    .extend_message {
      margin-top: 20rpx;
      color: #ccc;
      display: flex;

      text {
        color: #ff9900;
      }
    }

    .level_bar {
      width: 100%;
      height: 40rpx;
      border-radius: 40rpx;
      overflow: hidden;
      display: flex;
      color: #ccc;
      font-size: 20rpx;
      text-align: right;
      line-height: 40rpx;

      view {
        border-right: 2rpx solid #fff;
        position: relative;
      }

      .name {
        position: absolute;
        top: -30rpx;
        right: -40rpx;
      }

      .range {
        position: absolute;
        bottom: 30rpx;
        right: -40rpx;
      }

      .default_bar {
        background-color: #A0DFCD;
      }

      .active_bar {
        background-color: #02AE7A;
      }
    }

    .right_btn {
      float: right;
      display: flex;
      color: #ccc;
      font-size: 22rpx;

      view {
        line-height: 50rpx;
        height: 50rpx;
        margin: 0 20rpx;
      }

      .active_btn {
        padding: 0rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }

    .end_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;
    }

    .row_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;

      &::after {
        content: "";
        height: 0px;
        width: 92%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 0;
        border-top: 1px dashed #ccc;
      }
    }

    .the_title {
      display: flex;
      align-items: center;

      .left_title {
        display: flex;
        align-items: center;
      }

      .title_icon {
        background-color: #7E7E7E;
        height: 40rpx;
        width: 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .extend_rank {
      width: 100%;
      background-color: #F5F5F5;
      box-sizing: border-box;
      padding: 10rpx;

      .rank_item {
        width: 100%;
        margin: 20rpx 0;
        box-sizing: border-box;
        display: flex;
        font-size: 26rpx;
        justify-content: space-between;
        align-items: center;

        image {
          width: 10%;
        }

        text {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: block;
        }

        .name {
          margin: 0 10rpx;
          color: #7D7D7D;
          width: 20%;
        }

        .desc {
          width: 50%;
          color: #ccc;
        }

        .money {
          width: 20%;
          text-align: right;
        }
      }
    }
  }

  .top_head {
    height: 435rpx;
    width: 100%;
    padding: 60rpx 10rpx 0rpx 10rpx;
    background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/0edf7889-12cb-4151-94b7-a2c12d27108a.jpg") no-repeat center 0px;
    background-size: 100% 100%;
    box-sizing: border-box;

    .top_desc {
      width: 100%;
      border-radius: 20rpx;
      background-color: #fff;
      margin-top: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;

      .text-gray {
        font-size: 28rpx;
        color: #ccc;
        margin-right: 10rpx;
      }

      .remaining {
        font-size: 46rpx;
      }

      .flex_1 {
        flex: 1;
      }

      .head_block {
        margin-top: 20rpx;

        .income {
          color: #E34B5E;
        }
      }
    }

    .text_des {
      height: 100rpx;
      color: #fff;
      font-weight: 900;
      position: relative;
      //margin-left: 60rpx;

      text {
        display: inline-block;
        height: 100%;
      }

      .month_num {
        font-size: 90rpx;
      }

      .month_text {
        font-size: 56rpx;
      }

      .month_year {
        font-size: 22rpx;
        position: absolute;
        left: 60rpx;
        top: 20rpx;
      }

      .point {
        font-size: 40rpx;
      }

      .title {
        font-size: 40rpx;
      }
    }
  }
}
</style>
